{% extends 'game/base.html' %}
{% block style %}
	.game_user{
		width:100%;
		height:100%;
	}
{% endblock %}
{% block main %}
	<div id='user_echarts' class='game_user'></div>
{% endblock %}
{% block js %}
	<script type="text/javascript">
		var user_echarts = echarts.init(document.getElementById('user_echarts'),'essos');
		console.log(user_echarts);
		// prettier-ignore
		let dataAxis = {{ game_names|safe }};
		// prettier-ignore
		let data = {{ user_nums }};
		let yMax = Math.max.apply(null,data)+200;
		let dataShadow = [];
		for (let i = 0; i < data.length; i++) {
		  dataShadow.push(yMax);
		}
		option = {
		  title: {
		    text: '每个游戏累积用户登陆数',
		  },
		  tooltip:{
			  trigger: 'axis',
			  formatter: function(params){
				  return params[0].name+"<br>"+"累积登陆人数: "+params[0].value+"<br>"+
						 "累积注册人数: "+params[1].value;
			  }
		  },
		  legend: {
		  	data: [{
		  		    name: '登陆',
		          },
		          {
		            name: '注册',
		          },
		  	],
		  	itemWidth: 10,
		  	itemHeight: 10,
		  	itemGap: 35
		  },
		  dataZoom:{
			  type: "slider",
			  show: true,
			  start: 1,
			  end: 40,
		  },
		  xAxis: {
		    data: dataAxis,
		    axisTick: {
		      show: false
		    },
		    axisLine: {
		      show: false
		    },
		    // z: 10
		  },
		  yAxis: {
		    axisLine: {
		      show: false
		    },
		    axisTick: {
		      show: false
		    },
		  },
		  series: [
		    { name: '登陆',
		      type: 'bar',
		      showBackground: true,
		      data: {{ user_nums }},
			  markPoint: {
				data: [
					{ type: 'max', name: 'Max' },
					{ type: 'min', name: 'Min' }
				]
				},
				markLine: {
				    data: [{ type: 'average', name: 'Avg' }]
			    }
		    },
			{
				name: '注册',
				data: {{ reg_nums }},
				type: 'bar',
				markPoint: {
					data: [
						{ type: 'max', name: 'Max' },
						{ type: 'min', name: 'Min' }
					]
					},
					markLine: {
						data: [{ type: 'average', name: 'Avg' }]
				}
			}
		  ]
		};
		// Enable data zoom when user click bar.
		const zoomSize = 6;
		user_echarts.on('click', function (params) {
		  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
		  user_echarts.dispatchAction({
		    type: 'dataZoom',
		    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
		    endValue:
		      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
		  });
		});
		user_echarts.setOption(option);
		user_echarts.resize();
	</script>
{% endblock %}